<template>
  <div class="order-detail-box">
    <!--自定义公用头部，单击返回按钮触发回调函数close，关闭Dialog生成的弹窗，否则会一直霸占着页面-->
    <custom-header :title="'订单详情'" @callback="close"></custom-header>
    <!--显示订单基本信息-->
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ detail.orderStatusString }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ detail.createTime }}</span>
      </div>
      <!--状态按钮的判断-->
      <van-button v-if="detail.orderStatus == 3" style="margin-bottom: 10px" color="#1baeae" block
        @click="handleConfirmOrder(detail.orderNo)">确认收货</van-button>
      <!--模拟支付-->
      <van-button v-if="detail.orderStatus == 0" style="margin-bottom: 10px" color="#1baeae" block
        @click="showPayFn">去支付</van-button>
      <!--取消订单，单击调用handleCancelOrder方法，执行二次确认弹窗-->
      <van-button v-if="!(detail.orderStatus < 0 || detail.orderStatus == 4)" block
        @click="handleCancelOrder(detail.orderNo)">取消订单</van-button>
    </div>
    <!--订单金额和快递信息-->
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>￥{{ detail.totalPrice }}</span>
      </div>
      <div class="price-item">
        <lable>配送方式：</lable>
        <span>普通快递</span>
      </div>
    </div>
    <!--订单商品详情显示-->
    <van-card v-for="item in detail.newBeeMallOrderItemVOS" :key="item.goodsId" style="background: #fff"
      :num="item.goodsCount" :price="item.sellingPrice" desc="全场包邮" :title="item.goodsName"
      :thumb="$filters.prefix(item.goodsCoverImg)" />
    <!--底部上滑弹窗，确认支付方式，模拟支付-->
    <van-popup v-model:show="showPay" position="bottom" :style="{ height: '24%' }">
      <div :style="{ width: '90%', margin: '0 auto', padding: '20px 0' }">
        <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block
          @click="handlePayOrder(detail.orderNo, 1)">支付宝支付</van-button>
        <van-button color="#4fc08d" block @click="handlePayOrder(detail.orderNo, 2)">微信支付</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from 'vue'
import CustomHeader from 'components/CustomHeader.vue'
import { getOrderDetail, cancelOrder, confirmOrder, payOrder } from 'service/order'
import { Dialog, Toast } from 'vant'
import { useRoute } from 'vue-router'

export default {
  name: 'OrderDetail',
  components: {
    CustomHeader
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      detail: {}, //订单详情变量
      showPay: false //是否显示支付方式弹窗
    })
    //初始化
    onMounted(() => {
      initData()
    })

    const initData = async () => {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      const { id } = route.query
      const { data } = await getOrderDetail(id)
      /**
       * data 数据结构
       * {
       *  createTime: 创建时间
       *  newBeeMallOrderItemVOS:[{
       *    goodsId:商品id,
       *    goodsCount:商品数量，
       *    goodsName:商品名称
       *  }]
       *  orderNo:订单编号
       *  orderStatus:订单状态值
       *  orderStatusString: 订单状态名称
       *  payStatus: 支付状态
       *  payTime：支付时间
       *  payType: 支付类型
       *  payTypeString：支付方式名称
       *  totalPrice：总价
       * }
       */
      state.detail = data
      Toast.clear()
    }
    //取消订单二次确认弹窗方法
    const handleCancelOrder = (id) => {
      Dialog.confirm({
        title: '确认取消订单？',
      }).then(() => {
        cancelOrder(id).then(res => {
          if (res.resultCode == 200) {
            Toast('删除成功')
            initData()
          }
        })
      }).catch(() => {
        //on cancel
      });
    }
    //确认订单方法
    const handleConfirmOrder = (id) => {
      Dialog.confirm({
        title: '是否确认订单？'
      }).then(() => {
        confirmOrder(id).then(res => {
          if (res.resultCode == 200) {
            Toast('确认成功')
            initData()
          }
        })
      }).catch(() => {
        //on cancel
      });
    }
    //调用支付方式弹窗
    const showPayFn = () => {
      state.showPay = true
    }
    //模拟支付方法
    const handlePayOrder = async (id, type) => {
      Toast.loading
      await payOrder({ orderNo: id, payType: type })
      state.showPay = false
      initData()
    }
    //返回的回调函数
    const close = () => {
      Dialog.close()
    }

    return {
      ...toRefs(state),
      handleCancelOrder,
      handleConfirmOrder,
      showPayFn,
      handlePayOrder,
      close
    }
  }
}
</script>
<style lang="less" scoped>
.order-detail-box {
  background: #f7f7f7;

  .order-status {
    background: #fff;
    padding: 20px;
    font-size: 15px;

    .status-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {}
    }
  }
}

.order-price {
  background: #fff;
  margin: 20px 0;
  padding: 20px;
  font-size: 15px;

  .price-item {
    margin-bottom: 10px;

    label {
      color: #999;
    }

    span {}
  }
}

.van-card {
  margin-top: 0;
}

.van-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>